import React from "react";
import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
import styles from "../style.less";

export default (props) => {
  const {
    node: { attrs, content },
  } = props;
  let latexString = attrs["data-latex"];
  const isOld = Boolean(latexString);
  latexString = isOld ? latexString : (content as any).content[0].text;
  const onDoubleClick = () => {
    props.editor
      .chain()
      .focus()
      .openFormula(latexString)
      .run();
  };

  const onClick = () => {
    // props.editor.commands.focus('');
  };

  return (
    <>
      <NodeViewWrapper
        className={styles.latexHtml}
        onDoubleClick={onDoubleClick}
        onClick={onClick}
      >
        {/* <div contentEditable={true} suppressContentEditableWarning>
          <span
            contentEditable={false}
            dangerouslySetInnerHTML={{
              __html: window.katex.renderToString(latexString),
            }}
          />
        </div> */}
        <NodeViewContent className="node-content" contentEditable={false}  dangerouslySetInnerHTML={{
              __html: window.katex.renderToString(latexString),
            }}/>
        {/* <NodeViewContent hidden /> */}
      </NodeViewWrapper>
    </>
  );
};
